<template>
	<div>
		<el-dialog title="编辑客服" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" :append-to-body='true'>
			<!--form表单-->
			<el-form size="small" ref="form" :model="form" :rules="formRules" :label-width="formLabelWidth">
				<el-form-item label="用户" prop="user_name">
					<el-row>
						<el-button @click="addClick" icon="Plus">选择用户</el-button>
						<div v-if="form.user_id>0" class="img">
							<img :src="userInfo.avatarUrl" width="100" height="100" />
							<span>{{userInfo.user_id}}({{userInfo.nickName}})</span>
						</div>
					</el-row>
				</el-form-item>
				<el-form-item label="客服头像" prop="avatarUrl">
					<el-row>
						<div class="draggable-list">
							<div class="item img-select" v-if="!form.avatarUrl" @click="openProductUpload()">
								<el-icon>
									<Plus />
								</el-icon>
							</div>
							<div v-if="form.avatarUrl" class="item" @click="openProductUpload()">
								<img :src="form.avatarUrl" width="100" height="100" />
							</div>
						</div>
					</el-row>
					<span class="gray9 f12">建议尺寸240px*240px</span>
				</el-form-item>
				<el-form-item label="客服昵称" prop="nick_name">
					<el-input v-model="form.nick_name"></el-input>
				</el-form-item>
				<el-form-item label="客服账号" prop="user_name">
					<el-input v-model="form.user_name" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="客服密码" prop="password">
					<el-input v-model="form.password" placeholder="请输入确认密码" type="password" />
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input v-model="form.confirmPassword" placeholder="请输入确认密码" type="password" />
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort" type="number"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<!--添加-->
		<UserSelect :is_open="open_add" @close="closeDialogFunc"></UserSelect>
		<Upload v-if="isProductUpload" :isupload="isProductUpload" @returnImgs="returnProductImgsFunc">上传图片</Upload>
	</div>
</template>

<script>
import {
	tochatedit,
	chatedit
} from '@/api/service.js';
import UserSelect from '@/components/user/GetUser.vue';
import Upload from '@/components/file/Upload.vue';

export default {
	components: {
		Upload,
		UserSelect
	},
	data() {
		/*确认新密码验证*/
		let checkPasswordConfirm = (rule, value, callback) => {
			if (this.form.password != '' && !value) {
				callback(new Error('请填写确认密码'));
			} else if (this.form.password != '' && value !== this.form.password) {
				callback(new Error('确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			isProductUpload: false,
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			loading: false,
			/*是否打开添加弹窗*/
			open_add: false,
			/*是否显示*/
			dialogVisible: false,
			chat_user_id: null,
			/*form表单对象*/
			form: {
				status: 1
			},
			userInfo: {},
			/*form验证*/
			formRules: {
				user_id: [{
					required: true,
					message: '用户必填',
					trigger: 'blur'
				}],
				avatarUrl: [{
					required: true,
					message: '客服头像必传',
					trigger: 'blur'
				}],
				nick_name: [{
					required: true,
					message: '客服昵称',
					trigger: 'blur'
				}],
				user_name: [{
					required: true,
					message: '客服账号必填',
					trigger: 'blur'
				}],
				confirmPassword: [{
					validator: checkPasswordConfirm,
					required: true,
					trigger: 'blur'
				}],
				sort: [{
					required: true,
					message: '排序必填',
					trigger: 'blur'
				}],
			}
		};
	},
	created() {},
	props: ['open', 'model'],
	watch: {
		open: function(n, o) {
			if (n != o) {
				this.dialogVisible = this.open;
				this.form.chat_user_id = this.model.chat_user_id;
				if (this.form.chat_user_id) {
					this.getData();
				}
			}
		}
	},
	methods: {
		openProductUpload() {
			this.isProductUpload = true;
		},
		returnProductImgsFunc(e) {
			if (e && e.length > 0) {
				this.form.avatarUrl = e[0].file_path;
			}
			this.isProductUpload = false;
		},

		/*获取详情*/
		getData() {
			let self = this;
			tochatedit({
				chat_user_id: self.form.chat_user_id
			}, true)
				.then(res => {
					self.form = res.data.model;
					self.form.password = '';
					self.userInfo = res.data.model.user || {};
					self.loading = false;
				})
				.catch(error => {
					console.log(error);
					self.loading = false;
				});
		},

		/*编辑*/
		onSubmit() {
			let self = this;
			self.loading = true;
			let params = self.form;
			chatedit(params, true)
				.then(data => {
					self.loading = false;
					ElMessage({
						message: '恭喜你，编辑成功',
						type: 'success'
					});
					self.dialogFormVisible(true);
				})
				.catch(error => {
					self.loading = false;
				});
		},
		addClick() {
			this.open_add = true;
		},
		/*关闭获取用户弹窗*/
		closeDialogFunc(e) {
			if (e && e.type != 'error') {
				this.userInfo = e.params[0]['user'];
				this.form.user_id = e.params[0].user_id;
			}
			this.open_add = false;
		},
		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('close', {
					type: 'success',
					openDialog: false,
				});
			} else {
				this.$emit('close', {
					type: 'error',
					openDialog: false
				});
			}
		}
	}
};
</script>

<style></style>